<template>
  <div class="edit">
    <!-- 导航区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="onClickLeft" />
    <!-- 图片区域 -->
    <div class="img">
      <van-image
        width="120"
        height="120"
        :src="myInfo.photo"
        fit="cover"
        round
      />
      <!-- 修改头像 -->
      <van-uploader class="img_hidden" :after-read="afterRead" />
    </div>
    <!-- 其他信息 -->
    <van-cell-group>
      <van-cell
        @click="editName(myInfo.name)"
        title="名称"
        is-link
        :value="myInfo.name"
      />
      <van-cell
        @click="editGender"
        title="性别"
        is-link
        :value="myInfo.gender ? '女' : '男'"
      />
      <van-cell
        @click="editBirthday(myInfo.birthday)"
        title="生日"
        is-link
        :value="myInfo.birthday"
      />
    </van-cell-group>

    <!-- 修改姓名 -->
    <van-dialog
      v-model="nameShow"
      title="修改名称"
      show-cancel-button
      @confirm="confirmName"
    >
      <van-cell-group>
        <van-field v-model="myname" ref="myfield" />
      </van-cell-group>
    </van-dialog>

    <!-- 修改性别 -->
    <van-popup
      v-model="genderShow"
      position="bottom"
      :style="{ height: '16%' }"
    >
      <van-nav-bar
        title="修改性别"
        left-text="返回"
        @click-left="genderCancel"
      />
      <van-cell-group>
        <van-cell is-link title="男" @click="changeGender(0)" />
        <van-cell is-link title="女" @click="changeGender(1)" />
      </van-cell-group>
    </van-popup>

    <!-- 修改生日 -->
    <van-popup
      v-model="birthdayShow"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-datetime-picker
        v-model="birthday"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="birthdayCancel"
        @confirm="changeBirthday"
      />
    </van-popup>

    <!-- 裁剪图片 -->
    <div v-if="mypanelShow" class="mypanel">
      <vue-cropper
        ref="cropper"
        :img="cropperImg"
        autoCrop
        autoCropWidth="120"
        autoCropHeight="120"
      />
      <van-button @click="cutImg" class="btnAdd" type="primary"
        >裁剪</van-button
      >
      <van-button class="btnEse" type="primary">取消</van-button>
    </div>
  </div>
</template>

<script>
import { editInfoAPI, editImgAPI } from "@/api";
import moment from "moment";
// 导入裁剪插件
import { VueCropper } from "vue-cropper";
export default {
  components: {
    VueCropper,
  },

  data() {
    return {
      nameShow: false,
      myname: "",
      genderShow: false,
      birthdayShow: false,
      birthday: new Date(),
      minDate: new Date("1950-1-1"),
      maxDate: new Date(),
      mypanelShow: false,
      cropperImg: "",
    };
  },
  computed: {
    myInfo: function () {
      return this.$store.state.userInfo;
    },
  },

  methods: {
    onClickLeft() {
      this.$router.push("/layout/my");
    },

    editName(name) {
      this.nameShow = true;
      this.myname = name;
      this.$nextTick(() => {
        this.$refs.myfield.focus();
      });
    },

    async confirmName() {
      await editInfoAPI({ name: this.myname });
      this.$toast.success("修改用户信息成功");
      this.$store.commit("setUserInfo", {
        ...this.myInfo,
        name: this.myname,
      });
    },

    editGender() {
      this.genderShow = true;
    },

    genderCancel() {
      this.genderShow = false;
    },

    async changeGender(val) {
      await editInfoAPI({ gender: val });
      this.$toast.success("修改性别成功");
      this.$store.commit("setUserInfo", {
        ...this.myInfo,
        gender: val,
      });
      this.genderShow = false;
    },

    editBirthday(val) {
      this.birthdayShow = true;
      this.birthday = new Date(val);
    },

    birthdayCancel() {
      this.birthdayShow = false;
    },

    async changeBirthday(value) {
      const time = moment(value).format("YYYY-MM-DD");
      await editInfoAPI({ birthday: time });
      this.$toast.success("修改信息成功");
      this.$store.commit("setUserInfo", {
        ...this.myInfo,
        birthday: time,
      });
      this.birthdayShow = false;
    },

    // file代表当前上传选中的文件对象
    afterRead(file) {
      this.mypanelShow = true;
      this.cropperImg = file.content;
    },

    cutImg() {
      this.$refs.cropper.getCropBlob(async (data) => {
        console.log(data)
        const fd = new FormData();
        fd.append("photo", data);
        // 将图片内容提交到接口中
        const res = await editImgAPI(fd);
        console.log(fd)
        console.log(res)
        // 接收返回的图片
        const imgPath = res.data.data.photo;
        // 关闭面板
        this.mypanelShow = false;
        // 更新 vuex 中的数据
        this.$store.commit("setUserInfo", {
          ...this.myInfo, // 先保存之前所有的数据
          photo: imgPath,
        });
      });
    },
  },

  created() {
    this.$store.dispatch("setUserInfo");
  },
};
</script>

<style lang="less">
.edit {
  .van-icon.van-icon-arrow-left.van-nav-bar__arrow {
    color: #fff;
  }
  .van-nav-bar__title.van-ellipsis {
    color: #fff;
  }
  .img {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .img_hidden {
      opacity: 0;
      position: absolute;
    }
    .van-uploader__upload {
      width: 120px;
      height: 120px;
    }
  }
  .van-cell__value.van-cell__value--alone.van-field__value {
    border: 1px solid #ccc;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-nav-bar {
    background-color: #3196fa;
  }
  .mypanel {
    width: 100vw;
    height: 100vh;
    background-color: pink;
    position: absolute;
    top: 0;
    .btnAdd {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .btnEse {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>